<template>
    <div class="container">
        <div class="header">
           <p>新增/修改角色</p>
           <el-button class="link" type="info">
                <router-link to="/roleList" style="color: #fff;">返回</router-link>
           </el-button>
       </div>
       <div class="main">
            <el-form :model="role" :rules="rules" ref="role" label-width="120px" class="">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="role.roleName" placeholder="请输入角色名称"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input type="textarea" v-model="role.roleDesc" placeholder="请输入角色描述" :rows="5"></el-input>
                </el-form-item>
                <el-form-item label="权限选择" prop="menuIds">
                  <div class="access-list">
                    <div  v-for="(item,index) in role.roleList" :key="index" class="access-item">
                      <template>
                        <el-checkbox v-model="item.checkAll" :indeterminate="item.isIndeterminate" @change="roleChange(index)"  :label="item.id">{{item.menuName}}</el-checkbox>
                        <el-checkbox-group v-model="role.menuIds" >
                          <el-checkbox v-for="(list,num) in item.subMenus" @change="roleListChange(index,num)" :label="list.id" :key="num">{{list.menuName}}</el-checkbox>
                        </el-checkbox-group>
                      </template>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="handleSave('role')">保存</el-button>
                    <el-button type="info" @click="backList">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return {
            id:'',
            role: {
              roleList:[],
              roleName:'',
                roleDesc:'',
              id :'',
              menuIds: []
            },
            rules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                roleDesc: [
                    { required: true, message: '请输入角色描述', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                menuIds:[
                    { type: 'array',  message: '请选择角色权限', required: true, trigger: 'change' }
                ]
            },

        }
    },
    mounted() {
        this.id = this.$router.currentRoute.query.id;
        this.getList();
        if(this.id){
            this.getDetailById();
        }
    },
    methods: {
        backList:function(){
            this.$router.go(-1);
        },
        getDetailById:function(){
            let url = CONSTANT.URL.roleDetail;
            common.post1(url,{id: this.id},(res)=>{
                if(res.code == 200){
                    let data = res.data.bussData;
                    this.role.roleName = data.roleName;
                    this.role.roleDesc = data.roleDesc;
                    this.role.menuIds = data.menuIds;
                    this.getList();
                }
            })
        },
        getList:function(){
            let url = CONSTANT.URL.menuList;
            common.post(url,null,(res)=>{
                let data = res.data.bussData;
                data.forEach((item)=>{
                    let status = false,
                        num = 0;
                    item.subMenus.map((list)=>{
                        if(this.role.menuIds.includes(list.id)){
                            status = true;
                            num++
                        }
                    })
                    item.checkAll = num === item.subMenus.length?true:false;
                    item.isIndeterminate = num === item.subMenus.length?false:status;
                })
                this.role.roleList = data;
            })
        },
        handleSave:function(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url = this.id ? CONSTANT.URL.roleUpdate : CONSTANT.URL.roleAdd,
                    data,param;
                    if(this.role.menuIds.length){
                        this.role.menuIds.forEach((item)=>{
                            item = parseInt(item)
                        })
                    }else{
                        this.role.menuIds = []
                    }
                    param = {
                        id:this.id?this.id:'',
                        roleName:this.role.roleName,
                        roleDesc:this.role.roleDesc,
                        menuIds:this.role.menuIds
                    }
                    common.post(url,param,(res)=>{
                        if(res.code == 200){
                            this.$message({
                                type: 'success',
                                message: '保存成功！'
                            });
                            this.$router.back()
                        }else{
                            this.$message({
                                type: 'warning',
                                message: res.msg
                            });
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
      roleChange:function(index){
        let arr = this.role.roleList[index].subMenus,
          id = this.role.roleList[index].id;
        this.role.roleList[index].isIndeterminate = false;
        arr.map((item)=>{
          if(event.target.checked){
            if(!this.role.menuIds.includes(item.id)){
              this.role.menuIds.push(item.id)
            }
            if(this.role.menuIds.includes(id)) return;
            this.role.menuIds.push(id)
          }else{
            this.role.menuIds.map((list,index)=>{
              if( list == item.id){
                this.role.menuIds.splice(index,1)
              }
            })
            this.role.menuIds.map((list,index)=>{
              if( list ==id){
                this.role.menuIds.splice(index,1)
              }
            })
          }
        })
      },
      roleListChange:function(index,num){
        console.log(event.target.checked)
        let objArr = this.role.roleList[index].subMenus,
          obj = objArr[num];
        this.role.menuIds.find((item,index)=>{
          if(event.target.checked){
            if(this.role.menuIds.includes(obj.id)) return;
            this.role.menuIds.push(obj.id)
          }else{
            if(!this.role.menuIds.includes(obj.id)) return;
            this.role.menuIds.splice(index,1)
          }
        })
        let checkNum = 0,
          id = this.role.roleList[index].id;
        objArr.map((item)=>{
          if(this.role.menuIds.includes(item.id)){
            checkNum++
          }
        })

        if(checkNum>0&&checkNum<objArr.length){
          this.role.roleList[index].isIndeterminate = true
        }else if(checkNum==0||checkNum == objArr.length){
          this.role.roleList[index].isIndeterminate = false
        }

        if(checkNum == 0){
          this.role.roleList[index].checkAll = false
        }else if(checkNum == objArr.length){
          this.role.roleList[index].checkAll = true
        }

        if(checkNum){
          if(this.role.menuIds.includes(id)) return;
          this.role.menuIds.push(id)
        }else{
          this.role.menuIds.find((item,index)=>{
            if(item == id){
              this.role.menuIds.splice(index,1)
            }
          })
        }
      },
    },

}
</script>
